<template>   
    <div >
      
     <Tool></Tool>
     <div class="bo">
     <nav class="nav">
      <div class="container">
        <h1 class="logo"><a id="nowPath" >首页</a></h1>
        <ul>
          <li><a href="/#/homePage">首页</a></li>
          <li><a href="/#/userCtrl">用户管理</a></li>
          <li><a href="/#/departmentCtrl">部门管理</a></li>
        </ul>
      </div>
    </nav>
    </div>
     
    
   <router-view></router-view>
  
</div>
</template>

  <script>
     
import Tool from './tool.vue'
    export default {
      data() {
        return {
         
        };
      },
      methods: {
       
      },
      components:{
        Tool
      },
      mounted:function(){
      const nav = document.querySelector('.nav')
        document.onmousemove = function (e)
        {
            e = e || window.event;
            //console.log(e.clientX+','+e.clientY)
           if(e.clientY<40){ 
            nav.classList.add('active')
          } else {
        nav.classList.remove('active')
        }
        }
      }
    }
  </script>

<style scoped>

.bo {
  font-family: 'Open Sans', sans-serif;
  background-color:rgb(255, 255, 255);
  height: 70px;

}

.container {
  max-width: 1200px;
  margin: 0 auto;
  height:100%;
}

.nav {
  position: fixed;
  background-color: rgb(232, 232, 232);
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.3s ease-in-out;
  height: 35px;
}

.nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease-in-out;
}

.nav ul {
  display: flex;
  list-style-type: none;
  align-items: center;
  justify-content: center;
}

.nav a {
  color: #000;
  text-decoration: none;
  padding: 7px 15px;
  transition: all 0.3s ease-in-out;
}

.nav.active {
  background-color: #222;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  height: 70px;
}

.nav.active a {
  color: #fff;
}

.nav.active .container {
  padding: 0px 0;
}

.nav a.current,
.nav a:hover {
  color: #c0392b;
  font-weight: bold;
}

  </style>